<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../css/header.css">
    <link rel="stylesheet" type="text/css" href="../../css/user.css">


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- jquery -->
<!--    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>-->


    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

    <script src="../../js/jquery-3.1.1.min.js"></script>

    <title>个人主页</title>
</head>
<body>

<div class="root">
    <div class="HeaderBar shadow-sm">
        <div class="HeaderInner">
            <div class="HeaderTabs">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link active" href="/zhifou/know">知否</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/zhifou/know">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/zhifou/find">发现</a>
                    </li>
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link" href="/zhifou/article">文章</a>-->
<!--                    </li>-->
                </ul>
            </div>
            <div class="input-group mb-3" id="sb-3">
                <input type="text" class="form-control" placeholder="忘了他吧，我偷电瓶养你！" aria-label="Recipient's username"
                       aria-describedby="button-addon2" id="search-content">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary search-btn" type="button" id="button-addon2">搜索</button>
                </div>
            </div>
            <div class="HeaderUserInfo">
                <img src="../../img/icons8-online-support-38.png" alt="" id="img-user-head">
            </div>
        </div>
    </div>

    <!-- 主体区域 -->
    <div class="main">
        <!-- 个人信息总区域 -->
        <div class="user-area">
            <!-- 个人信息卡片区域 -->
            <div class="main-card card shadow-sm">
                <!-- 封面 -->
                <div class="user-gbu"></div>
                <!-- 头像和信息 -->
                <div class="user-container">
                    <!-- 头像 -->
                    <div class="user-head-area"><div class="user-head"></div></div>
                    <!-- 个人信息 -->
                    <div class="user-name" id="name"></div>
                    <div class="user-follow-btn">
                        <button type="button" class="btn btn-outline-info btn-sm" id="btn-follow-user">关注Ta</button>
                    </div>
                    <div class="user-edit-btn">
                        <button type="button" class="btn btn-outline-info btn-sm" id="btn-edit-user" data-toggle="modal" data-target="#staticBackdrop">修改</button>
                    </div>
                    <div class="user-info">
                        <table class="table">
                            <tbody>
                            <tr>
                                <th>性别：</th>
                                <td><span id="gender"></span></td>
                            </tr>
                            <tr>
                                <th>介绍：</th>
                                <td><span id="introduction"></span></td>
                            </tr>
                            <tr>
                                <th>职业：</th>
                                <td><span id="career"></span></td>
                            </tr>
<!--                            <tr>-->
<!--                                <th>所在行业：</th>-->
<!--                                <td><span id="industry"></span></td>-->
<!--                            </tr>-->
                            <tr>
                                <th>注册时间：</th>
                                <td><span id="registerDate"></span></td>
                            </tr>
                            <tr>
                                <th>邮箱：</th>
                                <td><span id="email"></span></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 提问回答收藏关注粉丝 -->
                <div class="user-profilemain">
                    <div class="accordion" id="accordionExample">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <h2 class="mb-0">
                                    <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" id="btn1">
                                        收藏
                                    </button>
                                </h2>
                            </div>

                            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                                <div class="card-body">
                                    <div class="qList-area q1">
<!--                                            <a href="#"><p class="content-p">4月18日，“不可能打工”的周某出狱了，来接他的除了家人还有多家网红公司，公司代表们开着名贵跑车，开出数百万价码想签约周某。一时间周某成为了焦点，有人支持他直播，也有人抵制，因为他做过许多错事。早在出狱的14天隔离期内，周某就公开致歉，称自己的言行并不成熟，他还透露不会签约做网红，只想做普通人。可是，抵制他的人依旧不依不饶，因为他们不相信周某的声明，毕竟年薪几百万的诱惑太大了。</p></a>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo">
                                <h2 class="mb-0">
                                    <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" id="btn2">
                                        提出的问题
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                                <div class="card-body">
                                    <div class="qList-area q2">
<!--                                        <a href="#"><p class="content-p">4月18日，“不可能打工”的周某出狱了，来接他的除了家人还有多家网红公司，公司代表们开着名贵跑车，开出数百万价码想签约周某。一时间周某成为了焦点，有人支持他直播，也有人抵制，因为他做过许多错事。早在出狱的14天隔离期内，周某就公开致歉，称自己的言行并不成熟，他还透露不会签约做网红，只想做普通人。可是，抵制他的人依旧不依不饶，因为他们不相信周某的声明，毕竟年薪几百万的诱惑太大了。</p></a>-->
<!--                                        <a href="#"><p class="content-p">4月18日，“不可能打工”的周某出狱了，来接他的除了家人还有多家网红公司，公司代表们开着名贵跑车，开出数百万价码想签约周某。一时间周某成为了焦点，有人支持他直播，也有人抵制，因为他做过许多错事。早在出狱的14天隔离期内，周某就公开致歉，称自己的言行并不成熟，他还透露不会签约做网红，只想做普通人。可是，抵制他的人依旧不依不饶，因为他们不相信周某的声明，毕竟年薪几百万的诱惑太大了。</p></a>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree">
                                <h2 class="mb-0">
                                    <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" id="btn3">
                                        回答的问题
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                                <div class="card-body">
                                    <div class="qList-area q3">
<!--                                        <a href="#"><p class="content-p">4月18日，“不可能打工”的周某出狱了，来接他的除了家人还有多家网红公司，公司代表们开着名贵跑车，开出数百万价码想签约周某。一时间周某成为了焦点，有人支持他直播，也有人抵制，因为他做过许多错事。早在出狱的14天隔离期内，周某就公开致歉，称自己的言行并不成熟，他还透露不会签约做网红，只想做普通人。可是，抵制他的人依旧不依不饶，因为他们不相信周某的声明，毕竟年薪几百万的诱惑太大了。</p></a>-->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header" id="headingFour">
                                <h2 class="mb-0">
                                    <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" id="btn4">
                                        关注的问题
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
                                <div class="card-body">
                                    <div class="qList-area q4">
<!--                                        <a href="#"><p class="content-p">4月18日，“不可能打工”的周某出狱了，来接他的除了家人还有多家网红公司，公司代表们开着名贵跑车，开出数百万价码想签约周某。一时间周某成为了焦点，有人支持他直播，也有人抵制，因为他做过许多错事。早在出狱的14天隔离期内，周某就公开致歉，称自己的言行并不成熟，他还透露不会签约做网红，只想做普通人。可是，抵制他的人依旧不依不饶，因为他们不相信周某的声明，毕竟年薪几百万的诱惑太大了。</p></a>-->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header" id="headingFive">
                                <h2 class="mb-0">
                                    <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive" id="btn5">
                                        关注的用户
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
                                <div class="card-body" id="follow-card">
<!--                                    <div class="follow-container">-->
<!--                                        <ul><li>-->
<!--                                            <div class="fiveBox">-->
<!--                                                <div class="follow-head"><img src="../../img/icons8-online-support-38.png" alt=""></div>-->
<!--                                                <a href="#">-->
<!--                                                    <div class="follow-info-area">-->
<!--                                                        <div class="follow-info">-->
<!--                                                            <div class="follow-name">吱吱</div>-->
<!--                                                            <div class="follow-intro">是积分卡时间</div>-->
<!--                                                        </div>-->
<!--                                                    </div>-->
<!--                                                </a>-->
<!--                                                <div class="follow-btn"><button type="button" class="btn btn-info">取消关注</button></div>-->
<!--                                            </div>-->
<!--                                        </li></ul>-->
<!--                                    </div>-->
<!--                                    <div class="follow-container">-->
<!--                                        <ul><li>-->
<!--                                            <div class="fiveBox">-->
<!--                                                <div class="follow-click"></div>-->
<!--                                                <div class="follow-head"><img src="../../img/icons8-online-support-38.png" alt=""></div>-->
<!--                                                <a href="#">-->
<!--                                                    <div class="follow-info-area">-->
<!--                                                        <div class="follow-info">-->
<!--                                                            <div class="follow-name">吱吱</div>-->
<!--                                                            <div class="follow-intro">是积分卡时间</div>-->
<!--                                                        </div>-->
<!--                                                    </div>-->
<!--                                                </a>-->
<!--                                                <div class="follow-btn"><button type="button" class="btn btn-info">取消关注</button></div>-->
<!--                                            </div>-->
<!--                                        </li></ul>-->
<!--                                    </div>-->
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header" id="headingSix">
                                <h2 class="mb-0">
                                    <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix" id="btn6">
                                        粉丝
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordionExample">
                                <div class="card-body followed-card">
<!--                                    <div class="follow-container">-->
<!--                                        <ul><li>-->
<!--                                            <div class="fiveBox">-->
<!--                                                <div class="follow-head"><img src="../../img/icons8-online-support-38.png" alt=""></div>-->
<!--                                                <a href="#">-->
<!--                                                    <div class="follow-info-area">-->
<!--                                                        <div class="follow-info">-->
<!--                                                            <div class="follow-name">吱吱</div>-->
<!--                                                            <div class="follow-intro">是积分卡时间</div>-->
<!--                                                        </div>-->
<!--                                                    </div>-->
<!--                                                </a>-->
<!--                                                <input type="hidden" value="">-->
<!--                                                <div class="follow-btn"><button type="button" class="btn btn-info">关注Ta</button></div>-->
<!--                                            </div>-->
<!--                                        </li></ul>-->
<!--                                    </div>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">修改个人信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- 性别 -->
                    <div class="form-group">
                        <label for="exampleFormControlSelect1">性别：</label>
                        <select class="form-control" id="exampleFormControlSelect1">
                            <option>男</option>
                            <option>女</option>
                        </select>
                    </div>
                    <!-- 介绍 -->
                    <div class="form-group">
                        <label for="exampleFormControlTextarea1">介绍：</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                    </div>
                    <!-- 职业 -->
                    <div class="form-group">
                        <label for="exampleFormControlInput1">职业：</label>
                        <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="写入您的职业">
                    </div>
                    <!-- 所在行业 -->
<!--                    <div class="form-group">-->
<!--                        <label for="exampleFormControlSelect2">所在行业：</label>-->
<!--                        <select class="form-control" id="exampleFormControlSelect2">-->
<!--                            <option>IT</option>-->
<!--                            <option>金融</option>-->
<!--                            <option>教育</option>-->
<!--                        </select>-->
<!--                    </div>-->
                    <!-- 邮箱 -->
                    <div class="form-group">
                        <label for="exampleFormControlInput3">邮箱：</label>
                        <input type="email" class="form-control" id="exampleFormControlInput3" placeholder="name@example.com">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="btn-confirm-edit" data-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 引入DOM操作，需要放在body底部 -->
<script src="../../js/header.js"></script>
<script src="../../js/user.js"></script>

</body>
</html>
